<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!-- Consider specifying the language of your content by adding the `lang` attribute to <html> -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <!-- Use the .htaccess and remove these lines to avoid edge case issues.
         More info: h5bp.com/i/378 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>jQuery UI Demo</title>
    <meta name="description" content="jQuery UI demo">

    <!-- Mobile viewport optimized: h5bp.com/viewport -->
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../js/vendor/jquery-ui/themes/base/jquery.ui.all.css">

    <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

    <!-- All JavaScript at the bottom, except this Modernizr build.
         Modernizr enables HTML5 elements & feature detects for optimal performance.
         Create your own custom Modernizr build: www.modernizr.com/download/ -->
    <script src="../js/vendor/modernizr-2.5.3.min.js"></script>

    <style>
    .hidden {
        display: none;
    }

    .clearfix {
        clear: both;
    }

    nav ul {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }

    #canvas {
        background-color: #eee;
        height: 20em;
    }

    .widget {
        background-color: #F2FFE1;
        border: 1px solid #83D13D;
        opacity: 0.8;
        width: 10em;
        height: 3em;
        padding: 0.5em;
    }
    </style>
</head>

<body>
    <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
         chromium.org/developers/how-tos/chrome-frame-getting-started -->
    <!--[if lt IE 7]><p class="chromeframe">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

    <!-- Add your site or application content here -->

    <header>
      <h1 style="float: left">jQuery UI Demo</h1>
      <div class="clearfix"></div>
    </header>

    <nav id="navigation">
      <ul>
        <li id="version">Unknown jQuery Version</li>
        <li id="ui-version">Unknown jQuery UI Version</li>
      </ul>
    </nav>

    <div id="main" role="main">
      <p>God helps those who help themselves.</p>
      <div id="toolbar"></div>
      <div id="content">
        <div id="canvas">
          <div id="widget_1" class="widget">
            <p>widget 1</p>
          </div>
          <div id="widget_2" class="widget">
            <p>widget 2</p>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <div>Copyright &copy; 2012. All rights reserved.</div>
    </footer>

    <!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../js/vendor/jquery-1.7.2.js"><\/script>')</script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script>window.jQuery.ui || document.write('<script src="../js/vendor/jquery-ui-1.8.18.js"><\/script>')</script>

    <script src="../js/vendor/json2.js"></script>
    <script src="../js/vendor/require.js"></script>
    <script src="../js/vendor/d3.v2.js"></script>
    <script src="../js/vendor/jsrender.js"></script>

    <!-- scripts concatenated and minified via build script -->
    <script src="../js/plugins.js"></script>
    <script src="../js/utils.js"></script>

    <!-- end scripts -->

    <script>
    // common used scripts here
    var utils = utils;
    </script>

    <script>
    $(document).ready(function() {
        // version
        var version = $.fn.jquery;
        $("#version").html("jQuery: " + version);
        var uiVersion = $.ui.version;
        $("#ui-version").html("jQuery UI: " + uiVersion);

        // draggable
        $(".widget").draggable({
            containment: "#canvas",
            //handle: "",
            stack: "#canvas .widget", // active layer will be the topest
            scroll: true
        });
    });
    </script>
</body>
</html>
